<template>
  <div>
    <nav-bar>个人信息</nav-bar>
    <div class="info">
      <list title="头像" @listclick="show = true">
        <img :src="userInfo.avatar" />
      </list>
      <list
        title="昵称"
        :value="userInfo.nickname"
        @listclick="setNickName"
      ></list>
      <list title="手机号" :value="userInfo.mobile" isLink></list>
      <list title="性别" :value="userInfo.sex==0? '男':'女'" @listclick="setSex"></list>
      <list title="出生日期" value="请选择"></list>
      <list title="所在城市" value="请选择"  @listclick="show1 = !show1">
        </list>
        <van-area v-if="show1==true" :area-list="areaList" />
      <van-popup v-model="show" position="bottom">
        <div class="popup_item">
          <span>拍照选择</span>
        </div>

        <div class="popup_item">
          <span class="span" @click="uploadFile">从相册选择 </span>
          <input
            type="file"
            v-show="false"
            ref="fileRef"
            @change="filechange"
          />
        </div>

        <div class="popup_item" @click="show = false">
          <span>取消</span>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import "../../assets/city/city.json"
import list from "../list.vue";
import { getUserInfo, postImg, putUser } from "../../http/login";
export default {
  components: {
    list,
  },
  data() {
    return {
      show: false,
      userInfo: {},
      show1:false,
      areaList:{}
    };
  },

  mounted() {
    this.getUserInfoFn();
  },

  methods: {
    setNickName() {
      this.$router.push("/setinfo")
    },
    setSex(){
      this.$router.push("/setinfoy")
    },
    // 点击  从相册选择 -- >点击 input type =file
    uploadFile() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
    },
    //// 请求用户详情数据
    async getUserInfoFn() {
      const res = await getUserInfo();
      this.userInfo = res.data;
    },
    // 当选择了图片
    async filechange(e) {
      let x = e.target.files[0];
      const fd = new FormData();
      fd.set("file", x);
        //上传 头像
      const res = await postImg(fd);
    //   console.log(res);


      //修改 头像地址
      const userInfo = await putUser({
        avatar: res.data.path,
      });

    // 调用 用户详情数据
      this.getUserInfoFn();
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  margin-top: 8vh;
}
.popup_item {
  font-size: 16px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-bottom: 1px solid black;
}
</style>